<template>
  <footer class="mobile-footer">
      <div  :class="['item', {'active' : activeIndex === index}]" v-for="(item, index) in footer.data" :key="index">
          <p class="title" @click="toggleActive(index)">{{item.title}}</p>

          <div class="hide-content" v-for="(child, childIndex) in item.list" :keu="childIndex">
            <a :href="child.link">{{child.text}}</a>
          </div>
      </div>

      <div class="service">
            <a :href="service.link" v-for="(service, serviceIndex) in footer.service" :key="serviceIndex">{{service.text}}</a>
      </div>

      <a class="company">
          Copyright 2018 Swellpro Technology Co.,Ltd
      </a>

      <div class="links">
          <p>Follow Us:</p>
          <a class="iconfont icon-youtube"></a>
          <a class="iconfont icon-tian7_facebook"></a>
          <a class="iconfont icon-instagram"></a>
      </div>
  </footer>
</template>

<script>
export default {
  data () {
    return {
        activeIndex: -1,
        footer: {
            data: [
                {
                    title: 'Company',
                    list: [
                        {
                            text: 'About Us',
                            link: ''
                        },
                        {
                            text: 'News',
                            link: ''
                        },
                        {
                            text: 'Blog',
                            link: ''
                        },
                        {
                            text: 'Contact Us',
                            link: ''
                        },
                    ]
                }, 
                {
                    title: 'Shopping',
                    list: [
                        {
                            text: 'Swellpro Store',
                            link: ''
                        },
                        {
                            text: 'Find a Reseller',
                            link: ''
                        },
                        {
                            text: 'Become a Reseller',
                            link: ''
                        },
                        {
                            text: 'Become a Affiliate',
                            link: ''
                        },
                        {
                            text: 'Warranty policies',
                            link: ''
                        },
                    ]
                }, 
                {
                    title: 'Products',
                    list: [
                        {
                            text: 'SplashDrone 3+',
                            link: ''
                        },
                        {
                            text: 'Spry Drone',
                            link: ''
                        },
                        {
                            text: 'DronePower 45k',
                            link: ''
                        },
                    ]
                }, 
            ],
            service: [
                {
                    text: 'Privacy Policy',
                    link: ''
                },
                {
                    text: 'Terms of Use',
                    link: ''
                },
                {
                    text: 'English',
                    link: ''
                },
            ],
        }
    };
  },

  methods: {
      toggleActive(index) {
          if (this.activeIndex !== index) {
              this.activeIndex = index
          } else {
              this.activeIndex = -1
          }
      }
  }
}

</script>
<style lang='stylus'>
pxToVw(px)
    return unit(px / 7.5 * 2, 'vw')
.mobile-footer
    background #F2F2F2
    padding pxToVw(15) pxToVw(20) pxToVw(10)
    .item
        padding-bottom pxToVw(20)
        border-bottom 1px solid #E3E4E4
        .title
            color #838E94
            font-weight 400
            font-size pxToVw(14)
            padding-top pxToVw(20)
            position relative
            &:before,&:after
                content ""
                position absolute
                width pxToVw(9)
                height pxToVw(1)
                background #838E94
                top pxToVw(31.5)
                right pxToVw(15)
                z-index 5
                transition all .4s 
            &:after
                transform rotate(90deg)
        .hide-content
            padding-left pxToVw(20)
            font-size pxToVw(12)
            max-height 0px
            transition all .3s 
            overflow hidden
            a
                padding-top pxToVw(20)
                display block
                color #838E94
    .active
        .title
            &:before
                transform rotate(-45deg)
            &:after
                transform rotate(45deg)
        .hide-content
            max-height 500px
    .service
        display flex
        padding pxToVw(20) 0 pxToVw(10) pxToVw(5)
        a
            flex 1
            display block
            font-size pxToVw(12)
            color #838E94
            text-align center
            border-right 1px solid #E3E4E4
            &:last-child
                border none
    .company
        display block
        color #C3CBCF
        text-align left
        padding-left pxToVw(20)
        font-size pxToVw(12)
    .links
        display flex
        padding-left pxToVw(20)
        font-size pxToVw(12)
        color #838E94
        padding-top pxToVw(15)
        p
            line-height pxToVw(27)
        a
            display block
            font-size pxToVw(25)
            margin-left pxToVw(20)
</style>